<template>
  <div class="menus-manage">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist' }">项目列表</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home/prolist/proinfo' }">{{proinfo.proNo}}</el-breadcrumb-item>
        <el-breadcrumb-item>验收报告</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 立项信息 -->
        <div class="card-title">验收报告</div>
        <el-form label-width="100px" :model="acceptance" :rules="acceptanceRules" ref="acceptance">
          <el-row :gutter="24">
            <el-col :span="12">
              <!-- 合同编号 -->
              <el-form-item label="合同编号" prop="conNo">
                <el-select v-model="acceptance.conNo" style="width:100%">
                  <el-option
                    v-for="key in conList"
                    :key="key.id"
                    :label="key.conNo"
                    :value="key.conNo"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 合同名称 -->
              <el-form-item label="验收报告" prop="acceptName">
                <el-input v-model="acceptance.acceptName" placeholder="请输入名称或编号"></el-input>
              </el-form-item>
              <!-- 合同金额 -->
              <el-form-item label="验收类型" prop="type">
                <el-select v-model="acceptance.type" style="width:100%">
                  <el-option label="初验" value="1"></el-option>
                  <el-option label="验收" value="2"></el-option>
                  <el-option label="终验" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- 公司名称 -->
              <el-form-item label="签字人" prop="signUser">
                <el-input v-model="acceptance.signUser" placeholder="请输入签字人姓名"></el-input>
              </el-form-item>
              <!-- 验收日期 -->
              <el-form-item label="验收日期" prop="signDay">
                <el-date-picker
                  v-model="acceptance.signDay"
                  type="date"
                  placeholder="选择日期"
                  style="width:100%"
                ></el-date-picker>
              </el-form-item>
              <!-- 签订人 -->
              <el-form-item label="验收结果" prop="result">
                <el-select v-model="acceptance.result" style="width:100%">
                  <el-option label="通过" value="通过"></el-option>
                  <el-option label="部分通过" value="部分通过"></el-option>
                  <el-option label="不通过" value="不通过"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="选择文件">
            <input type="file" />
          </el-form-item>
          <!-- 备注说明 输入长度限制20-->
          <el-form-item label="备注说明" prop="note">
            <el-input
              type="textarea"
              placeholder="备注说明（20字以内）"
              :rows="3"
              maxlength="20"
              v-model="acceptance.note"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="card-line">
          <!-- 立即修改 -->
          <el-button
            type="primary"
            size="small"
            @click="onEdit"
            v-if="isEdit"
            :disabled="isSubmit"
          >立即修改</el-button>
          <el-button
            type="primary"
            size="small"
            @click="onSubmit"
            v-if="!isEdit"
            :disabled="isSubmit"
          >立即申请</el-button>
          <!-- 返回 -->
          <el-button size="small" style="float:right" @click="goBack">返回</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>

export default {
  // 当前实例数据
  data () {
    return {
      // 是否修改
      isEdit: false,
      // 防止重复提交
      isSubmit: false,
      // 验收报告
      acceptance: {
        // 合同编号
        conNo: '',
        // 验收报告名称或编号
        acceptName: '',
        // 验收类型
        type: '',
        // 签字人
        signUser: '',
        // 验收日期
        signDay: '',
        // 验收结果
        result: '',
        // 上传文件路径
        picUrl: '',
        // 备注说明
        note: ''
      },
      // 表单验证规则
      acceptanceRules: {
        conNo: [{ required: true, message: '请输入合同编号', trigger: 'blur' }],
        acceptName: [{ required: true, message: '请输入名称或编号', trigger: 'blur' }],
        type: [{ required: true, message: '请选择验收类型', trigger: 'change' }],
        signUser: [{ required: true, message: '请输入签字人姓名', trigger: 'blur' }],
        signDay: [{ required: true, message: '请选择验收日期', trigger: 'change' }],
        result: [{ required: true, message: '请选择验收结果', trigger: 'change' }]
      },
      // 所有合同数据
      conList: [],
      // 项目基本信息
      proinfo: {}
    };
  },

  // 创建实例后执行
  created () {
    // 获取项目基本信息
    this.getProinfo();
    // 获取所有合同信息
    this.getConList();
    // 是否修改
    this.editCon();
  },

  methods: {

    // 获取项目信息
    getProinfo () {
      let project = JSON.parse(sessionStorage.getItem('project'));
      this.proinfo = project;
    },

    // 查询所有合同
    getConList () {
      // 收集请求信息
      let params = {
        proId: this.proinfo.id
      };
      // 根据项目ID 查询所有项目合同
      this.$http.post('/api/findContractByProId', params).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          this.conList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 提交合同
    onSubmit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        proId: this.proinfo.id,
        // 合同编号
        conNo: this.acceptance.conNo,
        // 验收报告名称或编号
        acceptName: this.acceptance.acceptName,
        // 验收类型
        type: this.acceptance.type,
        // 签字人
        signUser: this.acceptance.signUser,
        // 验收日期
        signDay: this.acceptance.signDay,
        // 验收结果
        result: this.acceptance.result,
        // 上传文件路径
        picUrl: '',
        // 备注说明
        note: this.acceptance.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['acceptance'].validate(valid => {
          if (valid) {
            let file = document.querySelector('input[type=file]').files[0];
            if (file) {
              this.file();
            } else {
              this.saveCon(params);
            }
          }
        });
      });
    },

    // 文件上传
    file () {
      let file = document.querySelector('input[type=file]').files[0];
      let formData = new FormData(); // 创建form对象
      formData.append('uploadFile', file);

      this.$http.upload('api/uploadFile', formData).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let accep = {
            proId: this.proinfo.id,
            // 合同编号
            conNo: this.acceptance.conNo,
            // 验收报告名称或编号
            acceptName: this.acceptance.acceptName,
            // 验收类型
            type: this.acceptance.type,
            // 签字人
            signUser: this.acceptance.signUser,
            // 验收日期
            signDay: this.acceptance.signDay,
            // 验收结果
            result: this.acceptance.result,
            // 上传文件路径
            picUrl: datas,
            // 备注说明
            note: this.acceptance.note
          };
          // 执行添加
          this.saveCon(accep);
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 保存 - 验收报告
    saveCon (params) {
      // 添加验收报告
      this.$http.raw('api/insertAccept', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '添加成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['acceptance'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改项目验收报告 - 表单初始值
    editCon () {
      let row = this.$route.query.datas;
      if (row) {
        this.acceptance.id = row.id;
        this.acceptance.conNo = row.conNo;
        this.acceptance.acceptName = row.acceptName;
        this.acceptance.type = row.type.toString();
        this.acceptance.signUser = row.signUser;
        this.acceptance.signDay = row.signDay;
        this.acceptance.result = row.result;
        this.acceptance.note = row.note;
        this.acceptance.picUrl = row.picUrl;

        // 显示修改按钮
        this.isEdit = true;
      } else {
        return false;
      }
    },

    // 修改 - 验收报告
    onEdit () {
      // 防止重复提交
      this.isSubmit = true;
      setTimeout(() => {
        this.isSubmit = false;
      }, 1000);

      // 收集请求数据
      let params = {
        id: this.acceptance.id,
        proId: this.proinfo.id,
        // 合同编号
        conNo: this.acceptance.conNo,
        // 验收报告名称或编号
        acceptName: this.acceptance.acceptName,
        // 验收类型
        type: this.acceptance.type,
        // 签字人
        signUser: this.acceptance.signUser,
        // 验收日期
        signDay: this.acceptance.signDay,
        // 验收结果
        result: this.acceptance.result,
        // 上传文件路径
        picUrl: this.acceptance.picUrl,
        // 备注说明
        note: this.acceptance.note
      };

      this.$nextTick(() => {
        // 判断是否通过验证规则验证
        this.$refs['acceptance'].validate(valid => {
          if (valid) {
            let file = document.querySelector('input[type=file]').files[0];
            if (file) {
              this.updatefile();
            } else {
              this.updateCon(params);
            }
          }
        });
      });
    },

    // 文件上传  修改项目报告
    updatefile () {
      let file = document.querySelector('input[type=file]').files[0];
      let formData = new FormData(); // 创建form对象
      formData.append('uploadFile', file);

      this.$http.upload('api/uploadFile', formData).then(res => {
        let { code, datas } = res;
        if (code === 0) {
          let accep = {
            id: this.acceptance.id,
            proId: this.proinfo.id,
            // 合同编号
            conNo: this.acceptance.conNo,
            // 验收报告名称或编号
            acceptName: this.acceptance.acceptName,
            // 验收类型
            type: this.acceptance.type,
            // 签字人
            signUser: this.acceptance.signUser,
            // 验收日期
            signDay: this.acceptance.signDay,
            // 验收结果
            result: this.acceptance.result,
            // 上传文件路径
            picUrl: datas,
            // 备注说明
            note: this.acceptance.note
          };
          this.updateCon(accep);
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 修改项目报告
    updateCon (params) {
      // 添加项目合同
      this.$http.raw('api/updateAccept', params).then(res => {
        let { code } = res;
        // 判断Code状态
        if (code === 0) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          // 初始化弹窗表单数据
          this.$refs['acceptance'].resetFields();
          this.goBack();
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 返回
    goBack () {
      this.$router.push({
        path: '/home/prolist/proinfo/',
        query: {
          tabs: 'second'
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
